<template>
  <div id="detail"> 
    <DetailNavBar class="detail-nav" @titleClick="titleClick" ref="nav"/>
    <Scroll class="content" ref="scroll" @scroll="contentSceoll" :probeType="3">
      <DetailSwiper :topImages="topImages"/>
      <DetailBaseInfo :goods="goods"/>
      <DetailShopInfo :shop="shop"/>
      <DetailGoodsInfo :goodsInfo="goodsInfo" @goodsInfoImgLoad="imgload"/>
      <DetailGoodsParams ref="params" :paramInfo="paramInfo"/>
      <DetailCommentInfo ref="comment" :commentInfo="commentInfo"/>
      <GoodsList ref="recommend" :goods="recommendList"/>
    </Scroll>
    <DetailBottomBar @addCart="addCart"/>
    <BackTop @click.native="toTop" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import DetailNavBar from './childComps/DetailNavBar'
import DetailSwiper from './childComps/DetailSwiper'
import { getDetail, Goods, Shop, GoodsParam,getGoodsRecommend } from 'network/detail'
import DetailBaseInfo from './childComps/DetailBaseInfo'
import DetailShopInfo from './childComps/DetailShopInfo'
import DetailGoodsInfo from './childComps/DetailGoodsInfo'
import DetailGoodsParams from './childComps/DetailGoodsParams'
import DetailCommentInfo from './childComps/DetailCommentInfo'
import DetailRecommend from './childComps/DetailRecommend'
import DetailBottomBar from './childComps/DetailBottomBar'
import BackTop from 'components/content/backTop/BackTop'

import GoodsList from 'components/content/goods/GoodsList/'
import Scroll from 'components/common/scroll/Scroll'

import { itemListenerMixin,backTopMixin } from 'common/mixin.js'
import { debounce } from 'common/utils.js'

export default {
  name:'Detail',
  components: {
    DetailNavBar,
    DetailSwiper,
    DetailBaseInfo,
    DetailShopInfo,
    DetailGoodsInfo,
    DetailGoodsParams,
    DetailCommentInfo,
    DetailRecommend,
    GoodsList,
    DetailBottomBar,
    Scroll,
    BackTop
  },
  data() {
    return{
      iid:null,
      topImages:[],
      goods: {},
      shop: {},
      goodsInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommendList: [],
      themeTopYs: [],
      getThemeTopY:null,
      currentIndex: 0,
      isShowBackTop: false
    }
  },
  mixinx: [itemListenerMixin,backTopMixin],
  methods: {
    imgload() {
      this.$refs.scroll.refresh();
      //每次图片加载完成就去拿值
      this.getThemeTopY();
    },
    //title事件传递
    titleClick(index) {
      // console.log(index);
      this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],100);
    },
    //返回顶部
    toTop() {
      this.$refs.scroll.scrollTo(0,0,500);
    },
    contentSceoll(position) {
      //拿到滚动的y值
      const positionY = -position.y;
      //判断向上是否显示
      this.isShowBackTop = positionY > 1000;
      //将拿到的值与themeTopYs的值比较
      const length = this.themeTopYs.length;
      for(let i = 0; i < length-1; i++) {
        if(this.currentIndex != i && (positionY >= this.themeTopYs[i] && positionY < this.themeTopYs[i+1])) {
          this.currentIndex = i;
          this.$refs.nav.currentIndex = this.currentIndex;
        }
      }
    },
    //加入购物车
    addCart() {
      //1.获取购物车需要展示的信息
        const product = {};
        product.img = this.topImages[0];
        product.title = this.goods.title;
        product.desc = this.goodsInfo.desc;
        product.price = this.goods.price;
        product.iid = this.iid;
        //2.将商品加入购物车
        console.log(product.title,product.price,product.desc)
        this.$store.dispatch('addToCart',product).then(res => {
          this.$toast.show(res,1500);
        })
        //添加购物车成功

    }
  },
  created() {
    this.iid = this.$route.params.iid;
    //发送请求，获取数据
    getDetail(this.iid).then(res => {
      console.log(res);
      const data = res.result;
      this.topImages = data.itemInfo.topImages;
      //获取商品信息
      this.goods = new Goods(data.itemInfo,data.columns,data.shopInfo.services);
      //获取店铺信息
      this.shop = new Shop(data.shopInfo);
      //获取商品详细信息
      this.goodsInfo = data.detailInfo;
      console.log('goodsInfo',this.goodsInfo)
      //获取商品的详细数据
      this.paramInfo =  data.itemParams
      //获取评论
      this.commentInfo = data.rate;
    })
    //3.请求推荐数据
    getGoodsRecommend().then(res=> {
      this.recommendList = res.data.list;
    })
    //渲染完成后获取高度，但可能值不对，因为图片是后加载的
    // this.$nextTick(()=> {
    //   this.themeTopYs = [];
    //   this.themeTopYs.push(0);
    //   this.themeTopYs.push(this.$refs.params.$el.offsetTop)
      
    //   this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
    //   this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
    //   console.log(this.themeTopYs)
    // })
    //防抖
    this.getThemeTopY = debounce(() => {
      this.themeTopYs = [];
      this.themeTopYs.push(0);
      this.themeTopYs.push(this.$refs.params.$el.offsetTop)
      this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
      this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
      this.themeTopYs.push(Number.MAX_VALUE);
      // console.log(this.themeTopYs)
    },100)
  },
}
</script>

<style scoped>
  #detail {
    position: relative;
    z-index: 9;
    background: #fff;
    height: 100vh;
  }
  .detail-nav {
    position: relative;
    z-index: 100;
    background: #fff;
  }
  .content {
    height: calc(100% - 100px);
  }
</style>